<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

	<head>
		<c:set var="title" value="首页" scope="request" />
		<jsp:include page="/head.jsp" />
	</head>

	<body>
		<c:import url="/header.do" />
		<div class="col-md-3">
			<c:import url="/left-menu.do" />
		</div>
		<div class="col-md-9">

			<div>
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation">
						<a href="#home" aria-controls="home" role="tab" data-toggle="tab">基础上传</a>
					</li>
					<li role="presentation" class="active">
						<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">增强上传</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane " id="home">
						<form action="photo/upload.do" method="post" enctype="multipart/form-data" class="form-horizontal _uploadForm" style="padding-top: 1em;">
							<div class="form-group">
								<label class="col-sm-2 control-label">相册</label>
								<div class="col-sm-10">
									<select name="albumId" class="form-control" required="required">
										<option value="">请选择</option>
									</select>
								</div>
							</div>


							<div class="form-group">
								<label class="col-sm-2 control-label">相片</label>
								<div class="col-sm-10">
									<input type="file" name="img" accept="image/*" required="required" />
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">名称</label>
								<div class="col-sm-10">
									<input class="form-control" name="photoName" type="text" placeholder="请输入相片名称" />
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">说明</label>
								<div class="col-sm-10">
									<textarea name="photoMemo" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">

								<div class="col-sm-10 col-sm-offset-2">
									<button class="btn btn-default">上传相片</button>
								</div>
							</div>

						</form>

					</div>
					<div role="tabpanel" class="tab-pane active" id="profile">
						<div class="col-sm-6">
							<form action="photo/upload.do" method="post" enctype="multipart/form-data" class="form-horizontal _uploadForm" style="padding-top: 1em;">
								<div class="form-group">
									<label class="col-sm-2 control-label">相册</label>
									<div class="col-sm-10">
										<select name="albumId" class="form-control" required="required">
											<option value="">请选择</option>
										</select>
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 control-label">相片</label>
									<div class="col-sm-10">
										<input accept="image/*" class="hidden" type="file" name="img" required="required" />
										<button type="button" class="btn btn-danger _img"><i class="fa fa-image"></i> 选择图片</button>
									</div>
								</div>

								

								<div class="form-group">
									<label class="col-sm-2 control-label">名称</label>
									<div class="col-sm-10">
										<input class="form-control" name="photoName" type="text" placeholder="请输入相片名称" />
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 control-label">说明</label>
									<div class="col-sm-10">
										<textarea name="photoMemo" class="form-control"></textarea>
									</div>
								</div>
								<div class="form-group">

									<div class="col-sm-10 col-sm-offset-2">
										<button class="btn btn-default">上传相片</button>
										<button type="reset" class="btn btn-default">重填</button>
									</div>
								</div>

							</form>

						</div>
						<div class="col-sm-6">
							<img id="imgShow" style="max-width: 300px; max-height: 300px; margin-top: 1em;" src="img/_noimg.png" class="img-thumbnail" />
							<div class="progress" style="display: none; margin-top: 1em;">
								<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script type="text/javascript" src="photo-upload.js"></script>
		<jsp:include page="/footer.jsp" />
	</body>

</html>